<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>下一页</button>
    <span></span>
    <script>

        document.querySelector('button').onclick = function () {
            //1.创建ajax对象
            let ajax = new XMLHttpRequest();

            //2.配置请求信息
            ajax.open('get', 'http://localhost:3000/index?username="heihei"&age=18');

            //3.发送请求
            ajax.send();

            //4.等待响应，响应完成后接受结果
            ajax.onreadystatechange = function () {

                // 如果已经响应完成，并且响应后的结果是成功的，接受响应的结果
                if (ajax.readyState == 4 && ajax.status == 200) {
                    console.log(ajax.responseText);
                    //数据响应到页面
                    let data = JSON.parse(ajax.responseText);
                    document.querySelector('span').innerHTML = data.msg;
                }
            }
        }
    </script>
</body>

</html>